import React, { useState, useEffect } from 'react';
import { withRouter, useLocation } from 'react-router-dom';
import { formateDate } from "../../utils/dateUtils.js";
import { memoryUtils } from "../../utils/memoryUtils.js";
import menuList from "../../config/menuConfig.js";
import "./header.less";

const Header = () => {
    const [currentTime,setTime] = useState(formateDate(Date.now()));
    const username = memoryUtils.user.username;
    const path = useLocation().pathname;
    let title;
    const getTitle = () => {
        let name;
        menuList.forEach(item => {
            if(item.key === path) {
                name = item.title;
            } else if (item.children) {
                const cItem = item.children.find(cItem => cItem.key === path);
                if(cItem) {
                    name = cItem.title
                }
            }
        })
        return name;
    }

    title = getTitle();

    useEffect(() => {
        setTimeout(()=> {
            const time = formateDate(Date.now());
            setTime(time);
        },1000)
    })
    
    return (
        <div className="header">
            <div className="header-top">
                <span>欢迎,{username}</span>
                <a href="http://api.map.baidu.com/images/weather/day/qing.png">退出</a>
            </div>
            <div className="header-bottom">
                <div className="header-bottom-left">{title}</div>
                <div className="header-bottom-right">
                    <span>{currentTime}</span>   {/* 百度地图天气API存在跨域问题 暂时用静态代替 */}
                    <img src="http://api.map.baidu.com/images/weather/day/qing.png" alt="http://api.map.baidu.com/images/weather/day/qing.png"></img> 
                    <span>晴</span>
                </div>
            </div>
        </div>
    )
}
const Head = withRouter(Header);
export {Head};
// export default withRouter(Header);